{% extends "base_generic.html" %}

{% block title %}Sign Up{% endblock %}

{% block content %}
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div class="panel panel-default" style="border: none; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); background: rgba(255,255,255,0.95); backdrop-filter: blur(10px);">
        <div class="panel-heading" style="background: linear-gradient(45deg, #00b894, #00a085); color: white; border-radius: 20px 20px 0 0; text-align: center; padding: 25px;">
          <h3 class="panel-title" style="font-size: 24px; margin: 0; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);">📝 Sign Up</h3>
        </div>
        <div class="panel-body" style="padding: 40px; background: rgba(255,255,255,0.8); border-radius: 0 0 20px 20px;">
          
          {% if messages %}
            {% for message in messages %}
              <div class="alert alert-{{ message.tags }}" style="background: linear-gradient(45deg, #74b9ff, #0984e3); color: white; border: none; border-radius: 10px; box-shadow: 0 4px 15px rgba(116, 185, 255, 0.3);">
                <p style="margin: 0;">ℹ️ {{ message }}</p>
              </div>
            {% endfor %}
          {% endif %}
          
          <form method="post">
            {% csrf_token %}
            
            <div class="form-group">
              <label for="{{ form.username.id_for_label }}" style="font-weight: bold; color: #2c3e50;">👤 Username:</label>
              <div style="position: relative;">
                {{ form.username }}
                <style>
                  #{{ form.username.id_for_label }} {
                    width: 100%;
                    padding: 12px 20px;
                    border: 2px solid #ecf0f1;
                    border-radius: 10px;
                    font-size: 16px;
                    transition: all 0.3s ease;
                    background: rgba(255,255,255,0.9);
                  }
                  #{{ form.username.id_for_label }}:focus {
                    border-color: #00b894;
                    box-shadow: 0 0 10px rgba(0, 184, 148, 0.3);
                    outline: none;
                  }
                </style>
              </div>
              {% if form.username.errors %}
                <div class="text-danger" style="color: #e74c3c; font-weight: bold; margin-top: 5px;">❌ {{ form.username.errors }}</div>
              {% endif %}
            </div>
            
            <div class="form-group">
              <label for="{{ form.password1.id_for_label }}" style="font-weight: bold; color: #2c3e50;">🔒 Password:</label>
              <div style="position: relative;">
                {{ form.password1 }}
                <style>
                  #{{ form.password1.id_for_label }} {
                    width: 100%;
                    padding: 12px 20px;
                    border: 2px solid #ecf0f1;
                    border-radius: 10px;
                    font-size: 16px;
                    transition: all 0.3s ease;
                    background: rgba(255,255,255,0.9);
                  }
                  #{{ form.password1.id_for_label }}:focus {
                    border-color: #00b894;
                    box-shadow: 0 0 10px rgba(0, 184, 148, 0.3);
                    outline: none;
                  }
                </style>
              </div>
              {% if form.password1.errors %}
                <div class="text-danger" style="color: #e74c3c; font-weight: bold; margin-top: 5px;">❌ {{ form.password1.errors }}</div>
              {% endif %}
            </div>
            
            <div class="form-group">
              <label for="{{ form.password2.id_for_label }}" style="font-weight: bold; color: #2c3e50;">🔒 Confirm Password:</label>
              <div style="position: relative;">
                {{ form.password2 }}
                <style>
                  #{{ form.password2.id_for_label }} {
                    width: 100%;
                    padding: 12px 20px;
                    border: 2px solid #ecf0f1;
                    border-radius: 10px;
                    font-size: 16px;
                    transition: all 0.3s ease;
                    background: rgba(255,255,255,0.9);
                  }
                  #{{ form.password2.id_for_label }}:focus {
                    border-color: #00b894;
                    box-shadow: 0 0 10px rgba(0, 184, 148, 0.3);
                    outline: none;
                  }
                </style>
              </div>
              {% if form.password2.errors %}
                <div class="text-danger" style="color: #e74c3c; font-weight: bold; margin-top: 5px;">❌ {{ form.password2.errors }}</div>
              {% endif %}
            </div>
            
            <div class="form-group" style="margin-top: 30px;">
              <button type="submit" class="btn btn-success btn-block" style="background: linear-gradient(45deg, #00b894, #00a085); border: none; padding: 15px; border-radius: 10px; font-size: 16px; font-weight: bold; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 184, 148, 0.3);">
                🚀 Sign Up
              </button>
            </div>
          </form>
          
          <div class="text-center" style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #ecf0f1;">
            <p style="margin: 10px 0;">Already have an account? <a href="{% url 'login' %}" style="color: #0984e3; text-decoration: none; font-weight: bold;">🔐 Login here</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <style>
    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 184, 148, 0.4) !important;
    }
    
    a:hover {
      text-shadow: 0 0 5px currentColor;
    }
  </style>
{% endblock %} 